import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Btn from '../../ch/components/Btn.vue';

<Meta
  title="Components/Button"
  component={Btn}
  argTypes={{
    variant:    { control: { type: 'select', options: ['outline', 'bare', 'filled', 'outline-negative', 'bare-negative', 'link', 'link-negative'] } },
    size:    { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    icon:    { control: { type: 'select', options: ['ArrowRight', 'ArrowLeft', 'Checkmark'] } },
    iconPos: { control: { type: 'select', options: ['none', 'only','left', 'right'] } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Btn },
  template:
    `
    <div style="padding: 3em;" class="${args.variant.endsWith('-negative') ? 'bg--secondary-600' : ''}">
      <Btn :variant="variant" :size="size" :icon="icon" :iconPos="iconPos" :label="label" />
    </div>
    `,
});

# Button

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      variant: 'outline',
      size: 'base',
      icon: 'ArrowRight',
      iconPos: 'none',
      label: 'Button text',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Button or link
You can use the same class names for `button` or `a` elements
<Canvas>
<button type="button" class="btn btn--base btn--outline">
  <span class="btn__text">
    I am a button
  </span>
</button>
<a href="#" class="btn btn--base btn--outline">
  <span class="btn__text">
    I am a link
  </span>
</a>
</Canvas>

## Button variations
For type variations, the following css classes are built:
- `btn--outline` for standard buttons
- `btn--filled` for buttons used in a form
- `btn--bare` for buttons without strokes

<Canvas>
<button type="button" class="btn btn--base btn--outline">
  <span class="btn__text">
    btn--outline
  </span>
</button>
<button type="button" class="btn btn--base btn--filled">
  <span class="btn__text">
    btn--filled
  </span>
</button>
<button type="button" class="btn btn--base btn--bare">
  <span class="btn__text">
    btn--bare
  </span>
</button>
</Canvas>

## Button negative types
- `btn--outline-negative` for standard buttons on dark background
- `btn--bare-negative` for buttons without strokes on dark background

<Canvas style={{backgroundColor: '#2f4356'}}>
<button type="button" class="btn btn--base btn--outline-negative">
  <span class="btn__text">
    btn--outline-negative
  </span>
</button>
<button type="button" class="btn btn--base btn--bare-negative">
  <span class="btn__text">
    btn--bare-negative
  </span>
</button>
</Canvas>

## Sizes
For size variations, the following css classes are built:
- `btn--sm` for small buttons
- `btn--base` for standard size
- `btn--lg` for large buttons

<Canvas>
<button type="button" class="btn btn--outline btn--sm">
  <span class="btn__text">
    btn--sm
  </span>
</button>
<button type="button" class="btn btn--outline btn--base">
  <span class="btn__text">
    btn--base
  </span>
</button>
<button type="button" class="btn btn--outline btn--lg">
  <span class="btn__text">
    btn--lg
  </span>
</button>
</Canvas>

## Icons
For icon variations, the following css classes are built:
- `btn--icon-only` for a button without text
- `btn--icon-left` for icon left
- `btn--icon-right` for icon right
If needed, you can hide an existing icon by placing `btn--icon-none` on the button.

<Canvas>
<button type="button" class="btn btn--outline btn--base btn--icon-only">
  <svg
    viewBox="0 0 24 24"
    class="btn__icon icon icon--base"
  >
    <path
      d="m16.444 19.204 4.066-7.044-4.066-7.044-.65.375 3.633 6.294h-15.187v.75h15.187l-3.633 6.294z"
    ></path>
  </svg>
  <span class="btn__text">Button text</span>
</button>
<button type="button" class="btn btn--outline btn--base btn--icon-left">
  <svg
    viewBox="0 0 24 24"
    class="btn__icon icon icon--base"
  >
    <path
      d="m8.306 5.116-4.066 7.044 4.066 7.044.65-.375-3.633-6.294h15.187v-.75h-15.187l3.633-6.294z"
    ></path>
  </svg>
  <span class="btn__text">icon-left</span>
</button>
</Canvas>

## Button links

Button can be displayed as links. They are similar to bare buttons, but the paddings differ to help vertical alignments. The following variants still can be combined with `btn btn--link`:
- `btn--sm` and size variants
- `btn--icon-right` and icon position variants

<Canvas>
<div>
  <button type="button" class="btn btn--link">
    <span class="btn__text">Button link</span>
  </button>
  <hr />
  <button type="button" class="btn btn--link btn--icon-right">
    <svg viewBox="0 0 24 24" class="btn__icon">
      <path d="m12.3916 20.99951-5.25976-8.42578a5.87365 5.87365 0 1 1 10.53857-.0332zm0-16.167a5.1305 5.1305 0 0 0 -5.125 5.125 5.07366 5.07366 0 0 0 .52 2.25293l4.605 7.373 4.624-7.40625a5.07217 5.07217 0 0 0 .501-2.21972 5.1305 5.1305 0 0 0 -5.125-5.12495zm0 7.418a2.292 2.292 0 1 1 2.292-2.292 2.29476 2.29476 0 0 1 -2.292 2.29198zm0-3.834a1.542 1.542 0 1 0 1.542 1.542 1.54363 1.54363 0 0 0 -1.542-1.54201z" />
    </svg>
    <span class="btn__text">Button link with right icon</span>
  </button>
</div>
</Canvas>

## Negative button links

<Canvas style={{backgroundColor: '#2f4356'}}>
<div>
  <button type="button" class="btn btn--link-negative">
    <svg viewBox="0 0 24 24" class="btn__icon">
      <path d="m12.3916 20.99951-5.25976-8.42578a5.87365 5.87365 0 1 1 10.53857-.0332zm0-16.167a5.1305 5.1305 0 0 0 -5.125 5.125 5.07366 5.07366 0 0 0 .52 2.25293l4.605 7.373 4.624-7.40625a5.07217 5.07217 0 0 0 .501-2.21972 5.1305 5.1305 0 0 0 -5.125-5.12495zm0 7.418a2.292 2.292 0 1 1 2.292-2.292 2.29476 2.29476 0 0 1 -2.292 2.29198zm0-3.834a1.542 1.542 0 1 0 1.542 1.542 1.54363 1.54363 0 0 0 -1.542-1.54201z" />
    </svg>
    <span class="btn__text">Negative button link with icon</span>
  </button>
</div>
</Canvas>

## Buttons inside notification component

Buttons inside a `.notification` container inherit text color and border colors from their container. Check the [notification banner](?path=/docs/components-notificationbanner--example) example.
